<!DOCTYPE html>

<html>
    <head>
        <title>#{get 'title' /}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=${_response_encoding}">
        <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/layout_cliente.css'}">
        #{get 'moreStyles' /}
        <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
        <script src="@{'/public/javascripts/jquery-1.3.2.min.js'}" type="text/javascript" charset="${_response_encoding}"></script> 
        <script src="@{'/public/javascripts/sessvars.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        #{get 'moreScripts' /}
    </head>
    <script type="text/javascript">
 		function enviaPesquisa()
		{
		
		  document.formPesquisa.submit();
		} 
	</script>
<body>

<div id="pagina">
    
    <div id="topo">
        <div id="dentrotopo">
            <form name="formPesquisa" action="@{Produtos.listaProdutosCliente}">
            <img src="@{'/public/images/Logo.png'}" alt="Logo" />
            <input type="image" src="@{'/public/images/botaopesq.png'}" alt="Buscar..." id="botaoBusca" onclick="enviaPesquisa()"/>
            <input type="text" id="search" name="pesquisa" placeholder="Digite sua pesquisa..." style="border:none; background-color: none" />
            </form>	
        </div>
    </div>
        
    <div id="menu">
        <div id="dentromenu">
            <ul>
            <li><a href="@{Application.index_cliente()}" class="links"><img src="../../public/images/home.png"> Home</a></li>
            <li><a href="@{Produtos.listaProdutosCliente}" class="links"> Produtos</a></li>
            <li><a href="@{Application.empresa()}" class="links"> A Empresa</a></li>
            <li><a href="@{Application.contato()}" class="links"> Contato</a></li>
            </ul>
        </div>
    </div>
    
        <div id="content">
            #{if flash.error}
                <p class="fError">
                    <script type="text/javascript">
                    	alert('${flash.error}');
                    </script>
                </p>
            #{/if}
            
            #{if flash.success}
                <p class="fSuccess">
                    <script type="text/javascript">
                    	alert('${flash.success}');
                    </script>
                </p>
            #{/if}
              #{doLayout /}
    </div>
    
    <div id="clear">
    </div>
    
    <div id="rodape">
        <b>© 2013 - S4Info. Todos os Direitos Reservados.</b>
    </div>
    
</div>
</body>
</html>

<script type="text/javascript" charset="${_response_encoding}">

    // Rebuild state
    $('#search').val(sessvars.search)    
    if(sessvars.page == undefined) {
        sessvars.page = 1
    }


    $('#size option[value='+sessvars.size+']').attr('selected', 'true')
    
    // Search function
    var search = function() {
        sessvars.search = $('#search').val()
         sessvars.size = $('#size').val() 
        var listAction = #{jsAction @Produtos.listaProdutosClienteLoop(':search', 6, ':page') /} 
        $('#result').load(listAction({search: sessvars.search, size: sessvars.size, page: sessvars.page}), function() {
            $('#content').css('visibility', 'visible')
        })
    }
    
    // Events handler
    $('#submit').click(function() { 

        sessvars.page = 1
        search()
    })
    $('#search').keyup(function() {
        sessvars.page = 1
        search()
    })

    
</script>	
